<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!-- 
	{{}}只能绑定元素内容，不能绑定元素属性值
	用v-bind指令可以绑定元素属性值
	用法: <元素 v-bind:属性="js表达式"></元素>
	可以简写: <元素 :属性="js表达式"></元素> 
-->
  <div id="app">
    <h1>空气净化器</h1>
    <h2>pm25={{pm25}}</h2>
    <img :src="`../img/${index}.png`">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        pm25: 180,
        index: 1
      },
      //在Vue实例生命周期钩子函数中设置定时函数
      created() {
        setInterval(() => {
          this.pm25 = parseInt(Math.random() * 400);
          if (this.pm25 < 100) this.index = 1;
          else if (this.pm25 < 200) this.index = 2;
          else if (this.pm25 < 300) this.index = 3;
          else this.index = 4;
        }, 2000);
      },
    });

  </script>
</body>

</html>